<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="引入vue.js文件"></script>
    <title>Title</title>
    <style>
        [v-cloak]{display: none;}
    </style>
</head>
<body>
    <div id="hello">
        <h1>{{message}}</h1>
        <h1 v-once>{{message}}</h1>
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
        <p v-html="url"></p>
        <!--可以解析HTML语句，显示正确的链接-->
    </div>
    <div id="cloak" v-cloak>
        <h2>{{message}}</h2>
    </div>
    <script>
        //let变量 const常量
        //声明式编程
        const hello = new Vue({
            el: '#hello',//用于挂载要管理的文件
            data: {
                message: '你好，李焕英',
                name: '李焕英',
                movies: '[星际穿越]，[大闹天宫],[水中望月]',
                url: '<a href="http://baidu.com">百度一下</a>'
            }
        })
    </script>
    <script>
        //在vue解析之前，div里有v-cloak属性
        //vue解析之后，div里就没有v-cloak属性了
        setTimeout(function () {//给1s解析时间
            const cloak = new Vue({
                el:'#cloak',
                data:{
                    message: '加载完毕'
                }
            })
        },1000)
    </script>
</body>
</html>